<template>
  <div class="shop">
    <div class="search">
      <el-input class="input" v-model="form.keywords" placeholder="输入小店名或ID搜索" clearable></el-input>
      <el-button type="primary" @click="searchShop">搜索</el-button>
      <el-button class="addBtn" type="primary" @click="isShowcategory = true">新增小店分类</el-button>
    </div>

    <el-table
      class="shop_table_list"
      :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="分类名称"></el-table-column>
      <el-table-column label="分类icon">
        <template slot-scope="scope">
          <div>
            <img
              :key="scope.row.id"
              style="width:100px;"
              :src="scope.row.icon ? scope.row.icon : errorImg"
              alt
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pic" label="分类图片" width="190">
        <template slot-scope="scope">
          <div @click="lookBigPicture(scope.row.img)" class="look_picture">
            <img
              style="width:100px;vertical-align:middle;"
              :preview="scope.$index"
              :preview-text="scope.row.title"
              :src="scope.row.img ? scope.row.img : errorImg"
              alt
            />
            <span v-if="scope.row.img" class="lookbig">(查看大图)</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="shop_number" label="商家数"></el-table-column>
      <el-table-column prop="sort" label="展示顺序"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <p class="status—desc" v-if="scope.row.status == '1'">开启</p>
          <p class="status—desc" v-else>禁用</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="openShopDetail(scope.row.id)">详情</el-button>
          <el-button size="mini" type="danger" @click="deleteShop(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增分类" :visible.sync="isShowcategory" width="600px">
      <el-form class="add_moban_form"> 
        <el-form-item label="分类名称">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入名称"
            v-model="addform.title"
            maxlength="18"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="icon:">
          <!-- <div class="note_cate"> -->
          <uploadImg
            flieName="icon"
            class="icon_cate"
            :oldImgs="[addform.icon]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">支持上传png,jpg,gif格式的图片</p>
          <p class="note">建议图片尺寸：200*200px</p>
          <!-- </div> -->
        </el-form-item>

        <el-form-item label="分类图片">
          <uploadImg
            flieName="img"
            class="icon_cate"
            :oldImgs="[addform.img]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">支持上传png,jpg,gif格式的图片</p>
          <p class="note">建议图片尺寸：200*200px</p>
        </el-form-item>
        <el-form-item label="展示排序">
          <el-input style="width:70%;" type="text" placeholder="请输入0～99数值" v-model="addform.sort"></el-input>
          <p class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数值越大越靠前显示</p>
        </el-form-item>
      </el-form>
      <div  class="dialog-footer">
          <el-button size='mini' @click="isShowcategory = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="addShopCategory">确 定</el-button>
      </div>
    </jdialog>
  </div>
</template>

<script>
import errorImg from "@/assets/images/error_img.png";
import {
  shopTypeList,
  shoptypeopenorclose,
  shoptypedel,
  shoptypeaddormodify
} from "@/api/goods";
import uploadImg from "@/components/uploadImg";
export default {
  components: {
    uploadImg
  },
  mounted() {
    this.getShopList();
  },
  data() {
    return {
      isShowcategory: false,
      errorImg,
      form: {
        keywords: "",
        page: 1,
        size: 20
      },
      addform: {
        id: "",
        title: "",
        icon: "",
        img: "",
        sort: ""
      },
      total: 0,
      tableData: []
    };
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    getFile(file) {
      console.log(file);
      this.addform[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
    handleSizeChange(val) {
      this.form.size = val;
      this.pageChange(1);
    },
    pageChange(page) {
      this.form.page = page;
      this.getShopList();
    },
    //获取小店列表
    async getShopList() {
      let res = await shopTypeList(this.form);
      console.log(res.data.data);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    //搜索小店
    searchShop() {
      this.getShopList();
    },
    //添加小店
    addShopCategory() {
      //添加成功后重新获取小店列表
      if (!this.addform.title) {
        this.$message.error("名称不能为空");
        return;
      }
      if (!this.addform.icon) {
        this.$message.error("Icon不能为空");
        return;
      }
      if (!this.addform.img) {
        this.$message.error("图片不能为空");
        return;
      }
      if (!this.addform.sort) {
        this.$message.error("排序不能为空");
        return;
      }

      this.AddshopCategory();
    },
    //查看大图
    lookBigPicture(url) {
      this.$alert(`<img src="${url}"/>`, {
        dangerouslyUseHTMLString: true
      });
    },
    //更改小店禁用状态
    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      this.getshoptypeopenorclose(id, e);
    },
    //更改小店状态
    async getshoptypeopenorclose(id, e) {
      let res = await shoptypeopenorclose({ id: id, status: e });
      if (res.code === 10000) {
        this.$message.success("更改小店分类状态成功");
        this.getShopList();
      } else {
        this.$message.error(res.message);
      }
    },
    openShopDetail(id) {
      this.$router.push({
        path: "./shoplist",
        query: { cid: id }
      });
    },
    deleteShop(id) {
      this.$confirm("确定删除该小店?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除小店
        this.goshoptypedel(id);
      });
    },

    async goshoptypedel(id) {
      let res = await shoptypedel({ id: id });
      if (res.code === 10000) {
        this.$message.success("成功删除小店分类");
        this.getShopList();
      } else {
        this.$message.error("删除小店分类失败");
      }
    },
    async AddshopCategory() {
      let res = await shoptypeaddormodify(this.addform);
      if (res.code === 10000) {
        this.$message.success("成功新增小店分类");
        this.getShopList();
      } else {
        this.$message.error("新增小店分类失败");
      }
      this.isShowcategory = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    .input {
      width: 200px;
    }

    .addBtn {
      position: absolute;
      right: 25px;
      top: 20px;
    }
  }
   .add_moban_form{
    padding: 20px 20px 0;
  }
  .dialog-footer{
    margin: 20px 0;
    text-align: center;
  }
  .shop_table_list {
    margin-top: 20px;
  }
  .icon_cate {
    float: left;
  }
  .lookbig {
    font-weight: 400;
    color: #f4222d;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }
  .status—desc {
    display: inline;
    margin-left: 5px;
  }

  .look_picture {
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
  }
  .pagination {
    float: right;
  }
  .note{
    color: #999999;
    font-size: 14px;
  }
}
</style>